﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function Test1() {
            alert("divOuter");
        }

        function Test2(e) {
            //alert(window.aaaa);
            alert("divInner");

            if (typeof event != 'undefined') {// event IE
            //if (window.event) {// event IE
                event.cancelBubble = true;
            }
            else { // e w3c
                //alert(e.stopPropagation);
                e.stopPropagation();
            }
        }

        // 兼容 事件绑定
        // 内->外 事件冒泡 w3c ie
        // 外->内 事件捕获 w3c
        window.onload = function () {
            if (window.attachEvent) {//IE 8及以前
                document.getElementById("divOuter").attachEvent("onclick", Test1);
                document.getElementById("divInner").attachEvent("onclick", Test2);
            }
            else {//w3c 火狐
                document.getElementById("divOuter").addEventListener("click", Test1, false);
                document.getElementById("divInner").addEventListener("click", Test2, false);
            }
        };

        function Test() {
            alert(window.aaa);
        }

    </script>
</head>
<body>
    <div id="divOuter" style="width: 300px; height: 300px; background-color: Red;">
        <div id="divInner" style="width: 200px; height: 200px; background-color: Yellow;">
        </div>
    </div>
    <input type="button" value="test" onclick="Test();" />
</body>
</html>
